import 'package:audio_spectrum_example/playMp3.dart';
import 'package:audio_spectrum_example/secondPage.dart';
import 'package:audio_spectrum_example/sugar_tab_indicator.dart';
import 'package:audio_spectrum_example/xb_colors.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';

class InteractPage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => _InteractPageState();
}

class _InteractPageState extends State<InteractPage>
    with SingleTickerProviderStateMixin {
  late TabController tabController;
  late List<Widget> tabs;
  String? dataSource;

  RxInt currentIndex = 0.obs;

  @override
  void initState() {
    super.initState();
    final List<String> tabData = ['涂鸦', '视频', '音频'];
    tabs = tabData
        .map((e) => Tab(
              text: e,
            ))
        .toList();
    tabController = TabController(length: tabData.length, vsync: this);
    tabController.addListener(() {
      currentIndex.value = tabController.index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: [
          Column(
            children: [
              _buildBody(),
            ],
          )
        ],
      ),
    );
  }

  Widget _buildBody() {
    return Expanded(
        child: Container(
      child: Column(
        children: [
          _buildCanvas(),
          Flexible(child: _buildSize()),
        ],
      ),
    ));
  }

  Widget _buildCanvas() {
    return Obx(() => Container(
          width: Get.size.width,
          height: Get.size.width  ,
          margin: EdgeInsets.only(top: 0, left: 36, right: 36),
          padding: EdgeInsets.all(10),
          child: currentIndex.value == 0
              ? PlayMp3()
              : currentIndex.value == 1
                  ? SecondPage()
                  : SecondPage(),
        ));
  }

  Widget _buildSize() {
    return Container(
      width:Get.size.width,
      height: 200,
      margin: EdgeInsets.only(
        top: 200,
        left: 21,
        right: 21,
      ),
      decoration: BoxDecoration(
        color: XbColors.COLOR_FFFFFFFF,
        borderRadius: BorderRadius.all(Radius.circular(20)), // 对应四个角的圆角
      ),
      child: Column(
        children: [
          _tabBar(),
          Expanded(
              child: TabBarView(
                  controller: tabController,
                  physics: NeverScrollableScrollPhysics(),
                  children: [
                Container(),
                Container(),
                Container(),
              ])),
        ],
      ),
    );
  }

  Widget _tabBar() {
    return TabBar(
      controller: tabController,
      labelPadding: EdgeInsets.symmetric(horizontal: 1.0),
      tabs: tabs,
      labelStyle: TextStyle(fontSize: 32, fontWeight: FontWeight.bold),
      unselectedLabelStyle:
          TextStyle(fontSize: 32, fontWeight: FontWeight.bold),
      unselectedLabelColor: XbColors.COLOR_FF333333,
      labelColor: XbColors.COLOR_FF333333,
      indicatorSize: TabBarIndicatorSize.tab,
      indicator: SugarTabIndicator(
        gradientColor: [XbColors.COLOR_FFFF645C, XbColors.COLOR_FF5265FF],
      ),
    );
  }
}
